<template>
  <Form :label-width="100">
    <FormItem label="不触发鼠标事件">
      <i-switch size="small" v-model="markLine.silent"></i-switch>
    </FormItem>
    <FormItem label="两端标记大小">
      <InputNumber size="small" :max="1000" :min="0" v-model="markLine.symbolSize" :active-change="false"></InputNumber>
    </FormItem>
    <FormItem label="数值精度">
      <Tooltip content="辅助线类型为平均值线的时候有用" placement="left">
        <InputNumber size="small" :max="4" :min="0" v-model="markLine.precision"></InputNumber>
      </Tooltip>
    </FormItem>
    <FormItem>
      <Poptip :transfer="true" placement="top" trigger="hover">
        <Button size="small" type="primary"><Icon type="md-add" /> 添加辅助线</Button>
        <div slot="content">
          <Button class="m-r-5px" type="default" size="small" @click="addMarkLineDataItem('min')">最小值</Button>
          <Button class="m-r-5px" type="default" size="small" @click="addMarkLineDataItem('max')">最大值</Button>
          <Button class="m-r-5px" type="default" size="small" @click="addMarkLineDataItem('average')">平均值</Button>
          <Button type="default" size="small" @click="addMarkLineDataItem('median')">中位数</Button>
        </div>
      </Poptip>
    </FormItem>
    <Collapse class="m-t-5px" accordion>
      <Panel :name="$PnUtil.uuid()" v-for="(item, index) in markLine.data" :key="index">
        {{item.type | typeFilter}}辅助线
        <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteMarkLineDataItem(index)"><Icon type="md-trash" /></a>
        <div slot="content">
          <FormItem label="名称">
            <Tooltip content="将会作为鼠标滑入辅助线时的文字显示" placement="left">
              <Input size="small" v-model="item.name" placeholder=""/>
            </Tooltip>
          </FormItem>
          <FormItem label="类型">
            <Select :transfer="true" size="small" v-model="item.type">
              <Option v-for="(item, index) in $PnChartDict.markLineDataTypes" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItemPanel title="辅助文本">
            <FormItem label="显示">
              <i-switch size="small" v-model="item.label.show"></i-switch>
            </FormItem>
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="item.label.color" alpha recommend/>
            </FormItem>
            <FormItem label="字号">
              <InputNumber size="small" :max="1000" :min="0" v-model="item.label.fontSize" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="显示位置">
              <Select :transfer="true" size="small" v-model="item.label.position">
                <Option v-for="(item, index) in $PnChartDict.markLineLabelPositions" :value="item.value" :key="index">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="格式化">
              <Tooltip style="margin-bottom: 0px;" content="{a}：系列名；{b}：数据名；{c}：数据值；{d}：百分比" max-width="200" placement="left">
                <Input size="small" v-model="item.label.formatter" placeholder=""/>
              </Tooltip>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="线条样式">
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="item.lineStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="粗细">
              <InputNumber size="small" :max="1000" :min="0" v-model="item.lineStyle.width" :active-change="false"></InputNumber>
            </FormItem>
            <FormItem label="类型">
              <Select :transfer="true" size="small" v-model="item.lineStyle.type">
                <Option v-for="(item, index) in $PnChartDict.borderStyles" :value="item.value" :key="index">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
        </div>
      </Panel>
    </Collapse>
  </Form>
</template>

<script>
import PnDesigner from "@/utils/PnDesigner";

export default {
  name: "EchartsMarkLineConfigForm",
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      markLine: this.value
    }
  },
  mounted() {

  },
  methods: {
    addMarkLineDataItem (type) {
      this.markLine.data.push(PnDesigner.buildMarkLineDataItemConfigData({
        type: type
      }))
    },
    deleteMarkLineDataItem (index) {
      this.markLine.data.splice(index, 1)
    }
  },
  computed: {},
  watch: {
    value (val) {
      this.markLine = val;
    }
  },
  filters: {
    typeFilter: function (value) {
      switch (value) {
        case 'min':
          return '最小值'
        case 'max':
          return '最大值'
        case 'average':
          return '平均值'
        case 'median':
          return '中位数'
      }
    }
  }
}
</script>

<style scoped>

</style>
